<template>
  <view class="index-page">
    <!-- 占位：避免原生 titleNView 覆盖顶部内容 -->
    <view class="top-space"></view>

    <!-- 主内容区。 -->
    <scroll-view 
      class="content"
      :scroll-y="true"
    >
      <view class="grid">
        <view 
          v-for="(card, idx) in cards" 
          :key="idx" 
          class="card"
          @click="goToDetail(card)"
        >
          <view 
            class="media"
            :class="{ none: !card.image }"
            :style="card.image ? 'background-image: url(' + card.image + ')' : ''"
          ></view>
          <view class="body">
            <view class="title">{{ card.title }}</view>
            <view class="meta">
              <view class="user">
                <view class="avatar" :style="avatarStyle(card)">{{ (card.username || '').slice(0,1) }}</view>
                <view class="username">{{ card.username }}</view>
              </view>
              <view class="price">￥{{ card.price }}</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部导航占位 -->
      <view class="bottom-placeholder"></view>
    </scroll-view>

  </view>
</template>

<script>
// 使用选项式API来处理原生搜索框事件
export default {
  data() {
    return {
      cards: [
        { title: '帮我搬一台空调（楼梯）', username: '小张', price: 150, image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?auto=format&fit=crop&w=800&q=60' },
        { title: '代购：某专业考试复习资料（电子）', username: '米米', price: 20, image: '' },
        { title: '手机紧急维修：屏幕需要更换并同步数据（急）', username: '阿凯', price: 300, image: 'https://images.unsplash.com/photo-1510557880182-3f8a7f9b4f6d?auto=format&fit=crop&w=800&q=60' },
        { title: '小区帮取快递（需楼下取件）', username: '玲玲', price: 10, image: 'https://images.unsplash.com/photo-1546525848-3ce03ca516f6?auto=format&fit=crop&w=800&q=60' },
        { title: '阳台深度清洁（1小时）', username: '家政小王', price: 80, image: 'https://images.unsplash.com/photo-1503342452485-86f7f26d2f48?auto=format&fit=crop&w=800&q=60' },
        { title: '点餐并帮忙取餐（代付）', username: '小刘', price: 12, image: '' },
        { title: '帮忙照看宠物一整天', username: '李阿姨', price: 50, image: 'https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=800&q=60' },
        { title: '辅导小学数学作业', username: '大学生小王', price: 30, image: '' }
      ]
    }
  },
  
  // 监听原生搜索框确认事件
  onNavigationBarSearchInputConfirmed(e) {
    const keyword = e.text.trim()
    if (!keyword) {
      uni.showToast({
        title: '请输入搜索关键词',
        icon: 'none'
      })
      return
    }
    
    // 跳转到搜索结果页面
    uni.navigateTo({
      url: `/pages/index/searchResult?keyword=${encodeURIComponent(keyword)}`
    })
  },
  
  // 监听搜索框输入变化（可选）
  onNavigationBarSearchInputChanged(e) {
    // 如果需要实时搜索，可以在这里处理
    // 但根据需求，我们只在确认时跳转
  },
  
  methods: {
    // 跳转到详情页
    goToDetail(card) {
      const cardData = encodeURIComponent(JSON.stringify(card))
      uni.navigateTo({
        url: `/pages/index/detail?cardData=${cardData}`
      })
    },
    
    // 头像样式辅助
    avatarStyle(card) {
      if (!card.username) return {}
      const colors = [
        'linear-gradient(135deg,#6dd5ed 0%,#2193b0 100%)',
        'linear-gradient(135deg,#f6d365 0%,#fda085 100%)',
        'linear-gradient(135deg,#a1c4fd 0%,#c2e9fb 100%)',
        'linear-gradient(135deg,#d4fc79 0%,#96e6a1 100%)'
      ]
      const index = card.username.charCodeAt(0) % colors.length
      return {
        background: colors[index],
        color: '#fff'
      }
    }
  }
}
</script>

<style scoped>
.index-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
  box-sizing: border-box;
}

/* 顶部占位：让页面内容不被原生 titleNView 覆盖 */
.top-space {
  height: 54px;
  width: 100%;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 12px;
  box-sizing: border-box;
}

/* 网格布局 */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 卡片样式 */
.card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.card:active {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(18, 24, 40, 0.12);
}

.media {
  height: 160px;
  display: block;
  background: linear-gradient(0deg, rgba(0,0,0,0.16), rgba(0,0,0,0.02)), 
              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500"><rect width="100%" height="100%" fill="%23e6eef7"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="34" fill="%2399a6b8">图片预览</text></svg>') center/cover no-repeat;
  background-size: cover;
  background-position: center;
}
.media.none {
  height: 0;
  padding: 0;
}

.card .media.none + .body {
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  padding-bottom: 12px;
}

.card .media.none + .body .meta {
  margin-top: auto;
}

.body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.title {
  font-size: 15px;
  font-weight: 700;
  color: #16202b;
  line-height: 1.3;
}

.meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.price {
  background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}

.username {
  font-size: 13px;
  color: #8b94a6;
}

/* 底部导航占位 */
.bottom-placeholder {
  height: 20px;
}
</style>